<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 粘性布局 -->
    <van-sticky>
      <!-- 导航栏 -->
      <van-nav-bar
        title="绑定的门店"
        left-text=""
        left-arrow
        @click-left="returnTo"></van-nav-bar>
      <van-row
        style="margin-left: 9px; text-align: left"
        v-for="item in store">
        <van-cell is-link>
          <van-col span="12"
            >{{ item.storeName }}<br />
            <span>余额: </span><span style="color: red">￥</span
            ><span style="color: red">{{ item.amount }}</span
            >&nbsp; <span>积分:</span
            ><span style="color: red"> {{ item.inteer }}</span>
          </van-col>
           <van-col
            span="4"></van-col>
          <van-col
            span="9"
            @click="goBindStore(item.storeId, $route.query.id)"
            style="margin-top: 5px"
            >1家连锁门店
          </van-col>
        </van-cell>
        <hr />
      </van-row>

      <!-- 标题 -->
    </van-sticky>
  </div>
</template>

<script>
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      ejectshow: false,

      store: [
        // { storeName: "1234新乡南环店", balance: 0.00, Integral: "0",lian:1},
        // { storeName: "990新乡牧野路店", balance: 9.66, Integral: "100",lian:1},
        // { storeName: "910新乡总店正商城店", balance: 98.00, Integral: "500",lian:1},
      ],
    };
  },
  created() {
    this.loadStar();
    //生命周期  创建后要做的事情  vue被创建时候执行的
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    loadStar() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .post("/balance/queryAllye?userId=" + this.$route.query.id)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.store = response.data.data;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //跳转页面，查看该车辆绑定的门店
    goBindStore(storeId, userId) {
      //跳转页面时传参
      this.$router.push({
        path: "/bindStore",
        query: { storeId: storeId, userId: userId },
      });
    },
    returnTo() {
      this.$router.push('/myView');
    },
    onAreaConfirm() {
      this.ejectshow = false;
      this.arrSort = val;
      var addrInfo = val[0].name;
      this.valueSort = addrInfo;
    },
    bindCancel() {
      this.ejectshow = false;
    },
    //  提示弹出框
    TipDialog() {
      this.$dialog
        .alert({
          // title:'标题呀',
          message: "弹框内容",
        })
        .then(() => {
          console.log("点击了确认");
        });
    },

    //（确认、取消）的弹出框
    Dialog() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定删除该车牌吗？",
          confirmButtonColor: "#2979FF",
        })
        .then(() => {
          console.log("点击了确认");
          this.ejectshow = true;
        })
        .catch(() => {
          console.log("点击了取消");
        });
    },
  },
};
</script>
